<template>
  <div class="anime-detail" v-if="oAnimeDetailDatas">
    <el-card>
      <template #header>
        <h1>{{ oAnimeDetailDatas.title.english || oAnimeDetailDatas.title.romaji }}</h1>
      </template>

      <!-- 视频播放器 -->
      <div class="video-container">
        <video
          ref="videoPlayer"
          :src="currentVideoUrl"
          controls
          @timeupdate="fnSaveProgress"
          @ended="fnNextEpisode"
        ></video>
      </div>

      <!-- 播放控制栏 -->
      <div class="video-controls">
        <el-button @click="fnPrevEpisode" :disabled="currentEpisode === 1">
          上一集
        </el-button>
        <el-button @click="fnNextEpisode" :disabled="currentEpisode === episodeList.length">
          下一集
        </el-button>
      </div>

      <!-- 动漫封面和名称 -->
      <div class="anime-info">
        <el-image
          :src="oAnimeDetailDatas.coverImage.large"
          :alt="oAnimeDetailDatas.title.english || oAnimeDetailDatas.title.romaji"
          class="anime-cover"
        />
        <h2>{{ oAnimeDetailDatas.title.english || oAnimeDetailDatas.title.romaji }}</h2>
      </div>

      <!-- 可播放列表 -->
      <div class="episode-list">
        <el-button
          v-for="episode in episodeList"
          :key="episode"
          :type="currentEpisode === episode ? 'primary' : 'default'"
          @click="fnChangeEpisode(episode)"
        >
          第 {{ episode }} 集
        </el-button>
      </div>
    </el-card>
  </div>
  <div v-else-if="loading" class="loading-container">
    <el-skeleton :rows="6" animated />
  </div>
  <div v-else class="error-container">
    <el-empty description="无法加载动漫数据" />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { useDramaStorage } from "@/utils/storage";
const DramaStorage = useDramaStorage();
const route = useRoute()
const videoPlayer = ref(null)
const currentEpisode = ref(1)
const episodeList = ref([1, 2, 3, 4, 5])
const currentVideoUrl = ref('')
const oAnimeDetailDatas = ref(null)
const loading = ref(true)
const error = ref(null)

// 根据路由参数获取动漫ID
const animeId = route.params.id

// 获取动漫详情数据
const fetchData = async () => {
  try {
    loading.value = true
    oAnimeDetailDatas.value = await DramaStorage.fnfetchAnimeDetail(animeId)
  } catch (err) {
    error.value = err
    console.error('获取动漫详情失败:', err)
  } finally {
    loading.value = false
  }
}

// 根据集数生成视频URL
const fnGenerateVideoUrl = (episode) => {
  return `/videos/${animeId}/episode-${episode}.mp4`
}

// 切换集数
const fnChangeEpisode = (episode) => {
  currentEpisode.value = episode
  currentVideoUrl.value = fnGenerateVideoUrl(episode)
  fnLoadProgress()
}

// 上一集
const fnPrevEpisode = () => {
  if (currentEpisode.value > 1) {
    fnChangeEpisode(currentEpisode.value - 1)
  }
}

// 下一集
const fnNextEpisode = () => {
  if (currentEpisode.value < episodeList.value.length) {
    fnChangeEpisode(currentEpisode.value + 1)
  }
}

// 保存播放进度
const fnSaveProgress = () => {
  if (videoPlayer.value) {
    const progress = videoPlayer.value.currentTime
    localStorage.setItem(`anime-${animeId}-episode-${currentEpisode.value}-progress`, progress)
  }
}

// 加载播放进度
const fnLoadProgress = () => {
  if (videoPlayer.value) {
    const progress = localStorage.getItem(`anime-${animeId}-episode-${currentEpisode.value}-progress`)
    if (progress) {
      videoPlayer.value.currentTime = parseFloat(progress)
    }
  }
}

// 初始化
onMounted(async () => {
  await fetchData()
  fnChangeEpisode(1)
})

// 监听动漫ID变化
watch(() => route.params.id, async (newId) => {
  if (newId) {
    await fetchData()
    fnChangeEpisode(1)
  }
})
</script>

<style scoped>
.anime-detail {
  padding: 20px;
}

.video-container {
  margin-bottom: 20px;
}

video {
  width: 100%;
  height: auto;
  max-height: 600px;
  border-radius: 8px;
}

.video-controls {
  margin-top: 10px;
  text-align: center;
}

.anime-info {
  margin-top: 20px;
  text-align: center;
}

.anime-cover {
  width: 200px;
  height: auto;
  border-radius: 8px;
}

.episode-list {
  margin-top: 20px;
  text-align: center;
}

.episode-list .el-button {
  margin: 5px;
}

.loading-container,
.error-container {
  padding: 40px;
  text-align: center;
}
</style>